<section id="customPage_addOrUpdate" class="scrollable">
	<el-row>
		<el-col span="24">
			<el-menu mode="horizontal" background-color="#545c64" text-color="#fff" active-text-color="#ffd04b">
				<el-submenu index="99" show-timeout="100" hide-timeout="100">
					<template slot="title">页面操作</template>
					<el-menu-item index="99-1" @click="showAllControllerBtnsGroup=!showAllControllerBtnsGroup">
						{{showAllControllerBtnsGroup?"隐藏":"显示"}}控制按钮
					</el-menu-item>
					<el-menu-item index="99-2" @click="clearPageConfig">清空页面</el-menu-item>
				</el-submenu>
				<el-submenu v-for="(item,index) in menuNavPageItems" :index="index" show-timeout="100" hide-timeout="100">
					<template slot="title">{{item.name}}</template>
					<draggable element="div" :options="customPageConfig" :list="item.children" @start="customPageConfig.disabled=true" @end="customPageConfig.disabled=false">
						<el-menu-item v-for="(item1,index1) in item.children" :index="index+'-'+index1">{{item1.name}}</el-menu-item>
					</draggable>
				</el-submenu>
			</el-menu>
		</el-col>
		<el-col span="24">
			<draggable element="div" :options="pageConfig.rowDraggableConfig" :list="pageConfig.rowConfigs">
				<el-row v-for="(rowItem,rowIndex) in pageConfig.rowConfigs" :class="{'disabled-drag':rowItem.disabledDrag||showAllControllerBtnsGroup==false}" :gutter="rowItem.gutter" :type="rowItem.type" :justify="rowItem.justify" :align="rowItem.align" :tag="rowItem.tag">
					<div class="clearfix" v-show="showAllControllerBtnsGroup">
						<div class="pull-left wrapper-xs">第{{rowIndex+1}}行</div>
						<div class="pull-right m-xs text-hover-danger transition" @click="delPageLayout(pageConfig.rowConfigs,rowItem)">
							<i class="icon-close text-md"></i>
						</div>
						<div class="pull-right m-xs text-hover-success transition" @click="addPageLayout(rowItem.colConfigs,'col')">
							<i class="el-icon-circle-plus-outline text-md"></i>
						</div>
						<div class="pull-right m-xs text-hover-blue transition">
							<i class="icon-settings text-md"></i>
						</div>
						<div class="pull-right m-xs transition" @click="rowItem.disabledDrag=!rowItem.disabledDrag" :class="{'transform-rotate-45':rowItem.disabledDrag,'text-hover-success':rowItem.disabledDrag==false,'text-hover-danger':rowItem.disabledDrag==true}">
							<i class="el-icon-rank text-md"></i>
						</div>
					</div>
					<draggable element="div" class="clearfix" :class="{'draggable-min-height':showAllControllerBtnsGroup}" :options="rowItem.colDraggableConfig" :list="rowItem.colConfigs">
						<el-col v-for="(colItem,colIndex) in rowItem.colConfigs" :class="{'disabled-drag':colItem.disabledDrag||showAllControllerBtnsGroup==false}" :span="colItem.span" :offset="colItem.offset" :push="colItem.push" :pull="colItem.pull" :xs="colItem.xs" :sm="colItem.sm" :md="colItem.md" :lg="colItem.lg" :xl="colItem.xl" :tag="colItem.tag">
							<div :class="{'draggable-min-height':showAllControllerBtnsGroup}">
								<div class="clearfix" v-show="showAllControllerBtnsGroup">
									<div class="pull-left wrapper-xs">第{{rowIndex+1}}行，第{{colIndex+1}}列</div>
									<div class="pull-right m-xs text-hover-danger transition" @click="delPageLayout(rowItem.colConfigs,colItem)">
										<i class="icon-close text-md"></i>
									</div>
									<div class="pull-right m-xs text-hover-blue transition">
										<i class="icon-settings text-md"></i>
									</div>
									<div class="pull-right m-xs transition" @click="colItem.disabledDrag=!colItem.disabledDrag" :class="{'transform-rotate-45':colItem.disabledDrag,'text-hover-success':colItem.disabledDrag==false,'text-hover-danger':colItem.disabledDrag==true}">
										<i class="el-icon-rank text-md"></i>
									</div>
								</div>
								<draggable element="div" :class="{'draggable-min-height':showAllControllerBtnsGroup}" :options="colItem.customPageConfig" :list="colItem.customPageItems">
									<customPageItem v-for="(pageItem,pageIndex) in colItem.customPageItems" :itemType="pageItem.itemType" :itemConfig="pageItem.itemConfig"></customPageItem>
								</draggable>
							</div>
						</el-col>
					</draggable>
				</el-row>
			</draggable>
			<div v-show="showAllControllerBtnsGroup" class="plus-and-border transition" @click="addPageLayout(pageConfig.rowConfigs,'row')"></div>
		</el-col>
	</el-row>
</section>